<template>
  <div class="shrink-box no-drag">
    <a-layout class="h-full">
      <a-layout-header class="h-12n flex flex-a-c box-border">
        <div class="bgfff round-4 overflower-hidden w-full flex">
          <a-tabs hide-content :active-key="selectedKey" @tabClick="onTabChange">
            <a-tab-pane :key="1">
              <template #title>
                <div class="flex flex-a-c">
                  <span class="text-size-18 ml-6 font-bold px-14">跟群设置</span>
                </div>
              </template>
            </a-tab-pane>
            <a-tab-pane :key="2">
              <template #title>
                <div class="flex flex-a-c">
                  <span class="text-size-18 ml-6 font-bold px-14">跟群转链测试</span>
                </div>
              </template>
            </a-tab-pane>
            <!-- <a-tab-pane :key="3">
              <template #title>
                <div class="flex flex-a-c">
                  <span class="text-size-18 ml-6 font-bold px-14">日志管理</span>
                </div>
              </template>
            </a-tab-pane> -->
          </a-tabs>
        </div>
      </a-layout-header>
      <a-layout-content>
        <section class="content flex-1 h-full overflow-hidden box-border pt-14">
          <transition name="fade-slide" mode="out-in" appear>
            <keep-alive>
              <component ref="componentRef" :is="menuList[selectedKey - 1].value"></component>
            </keep-alive>
          </transition>
        </section>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import { Modal } from '@arco-design/web-vue'
import FllowGroup from './FllowGroup.vue'
import CopyTesting from './CopyTesting.vue'
// import Log from './Log.vue'
defineOptions({ name: 'home' })
const selectedKey = ref(1)
const componentRef = ref()
const menuList = [
  { name: '跟群设置', value: FllowGroup },
  { name: '跟群转链测试', value: CopyTesting }
  // { name: '日志管理', value: Log }
]
const onTabChange = async (e) => {
  if (e != 1) {
    const res = await window.ipcRenderer.invoke('storeGet', 'optionGroupSetting')
    const form = JSON.stringify(componentRef.value?.form)
    if (!form || form === JSON.stringify(res)) selectedKey.value = e
    else {
      Modal.warning({
        title: '警告',
        content: '当前设置未保存，跳转会重置设置，是否跳转？',
        hideCancel: false,
        onOk: () => {
          componentRef?.value?.resetForm()
          selectedKey.value = e
        }
      })
    }
  } else {
    selectedKey.value = e
  }
}
</script>
<style scope lang="scss">
.shrink-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #eee;
  box-sizing: border-box;
  padding: 10px;
  background: #ececec;
}
</style>
